<template>

  <div id="headerW" class="lucency">
    <div id="header">
      <a href="#" class="logo me-auto"><img src="../../../assets/711/711.svg" alt="" class="img-fluid">
        <span class="headerS">柒壹零</span>
      </a>
      <div class="nav">

        <div class="navbar">
          <div class="dlW">
            <div class="dl">
              <div class="dt"><a target="_self" href="/home">首页
                </a></div>


            </div>
            <div class="dl">
              <div class="dt"><a target="_self" href="/home">适用场景
                </a></div>


            </div>

            <div class="dl">
              <div class="dt"><a target="_self" href="/home">社区公告
                </a></div>


            </div>

            <div class="dl">
              <div class="dt"><a target="_self" href="/home">物业管理
                </a></div>


            </div>

            <div class="dl">
              <div class="dt"><a target="_self" href="/home">智能硬件
                </a></div>


            </div>

            <div class="dl">
              <div class="dt"><a target="_self" href="/home">联系我们
                </a></div>


            </div>
            <div class="bor anim" style="width: 94px; left: 348px;"></div>
          </div>
        </div>
      </div>
      <div class="pox_ri">
        <div class="lang">
          <div class="tips"><em>简体</em></div>
          <div class="ul animated fadeIn" style="opacity: 1;"><a href="/home" class="on">简体</a> <a href="/big5/home"
              class="">繁體</a> <a href="/en/home" class="">EN</a></div>
        </div>
        <div class="h_setch"> </div>
        <div class="h_menu_btn"><span></span> <span></span>
          <span></span>
        </div>
      </div>

    </div>

  </div>



  <div id="topingBanner">

    <div class="page_ban">
      <div class="auto">
        <div class="slogan">
          <div class="en">ABOUT community</div>

        </div>
        <div class="slogan_copy">
          <div class="en">ABOUT community</div>
        </div>
      </div>
    </div>
  </div>
  <div id="subNav">
    <div class="auto">
      <div class="le"><a href="/about/overview">出入管理</a> <a href="">
          访问预约
        </a></div>
      <div class="list">
        <div class="nav">

          <div class="li" style="margin-left:27px;"><a target="_self" href="">
              信息录入
            </a></div>
          <div class="li on" style="margin-left:27px;"><a target="_self" href="">
              访问预约
            </a></div>
          <div class="li jituandongshi_li" style="margin-left:27px;"><a target="_self" href="">
              人脸采集
            </a></div>
        </div>

        <div class="inner_bor AnimEnd" style="left: 118px; width: 64px;"></div>
      </div>
    </div>
  </div>

  <div class="auto">
    <h3 id="ah3" class="ahah">访问预约</h3>
    <h5 id="ah5" class="ahah5">make an appointment</h5>
  </div>
  <div class="yh">
    <img src="../../../assets/t/faw_adorn1.svg" alt="">
  </div>



  <div class="dbg">

    <div class="titleLi">
      <ul>
        <li>智</li>
        <li>慧</li>
        <li>社</li>
        <li>区</li>
      </ul>
      <ul>

        <li>来</li>
        <li>访</li>
        <li>预</li>
        <li>约</li>
        <li>申</li>
        <li>报</li>
      </ul>
    </div>
    <div class="titleNote">INTELLIGENCE COMMUNITY <br>DECLARATION OF VISITING APPOINMENT
    </div>
    <div class="tjcgIcon"><img src="../../../assets/t/提交成功.svg" alt="">
      <span>已发送</span>
    </div>
    <div class="fform"> <!-- 添加外来人口访问登记对话框 -->
      <el-form ref="OutsidersRef" :model="form" :rules="rules" label-width="80px">

        <el-form-item class="ita" label="姓名" prop="name">
          <el-input class="finput" v-model="form.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item class="ita" label="性别" prop="gender">
          <el-select class="finput" v-model="form.gender" placeholder="请选择性别">
            <el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label"
              :value="parseInt(dict.value)"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item class="ita" label="手机号" prop="phone">
          <el-input class="finput" v-model="form.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item class="ita" label="证件类型" prop="documentType">
          <el-select class="finput" v-model="form.documentType" placeholder="请选择证件类型">
            <el-option v-for="dict in document_type" :key="dict.value" :label="dict.label"
              :value="parseInt(dict.value)"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="ita" label="证件号" prop="number">
          <el-input class="finput" v-model="form.number" placeholder="请输入证件号" />
        </el-form-item>
        <el-form-item class="ita" label="访问事由" prop="reason">
          <el-input class="finput" v-model="form.reason" type="textarea" placeholder="请输入内容" />
        </el-form-item>


        <el-form-item class="ita" label="人脸" prop="faceImg">
          <image-upload v-model="form.faceImg" />
        </el-form-item>
        <el-form-item class="ita" style="margin-bottom: 10px;" label="访问时间" prop="beginTime">
          <el-date-picker clearable v-model="form.beginTime" type="date" value-format="YYYY-MM-DD"
            placeholder="请选择开始时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item class="ita" label="结束时间" prop="endTime">
          <el-date-picker clearable v-model="form.endTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item class="ita" style="margin-top: 10px;">
          <el-button style="width: 100px;background-color: #e40000;border: #e40000;" type="primary"
            @click="submitForm">提交申请</el-button>
          <el-button style="width: 100px;background-color: #fff;border: #fff;">重置</el-button>
        </el-form-item>

      </el-form>

    </div>
    <div class="bg3"><img src="../../../assets/t/faw_adorn2 (1).svg" alt=""></div>
    <div class=" bg1"><img src="../../../assets/t/mission_bg_icon1.png" alt="">
    </div>
    <div class="bg2"><img src="../../../assets/t/mission_bg_icon2.png" alt=""></div>
  </div>




  <!-- 底部 -->
  <div class="footer">
    <div class="footercontainer">
      <div class="footercopyright">
        ©2024 Copyright <strong><span>906~710 张柏焰 熊金平 严伟程 徐志良 林锦耀 吴宝杰</span></strong>. All Rights Reserved

      </div>


    </div>
  </div>

</template>

<script
  setup>  const { proxy } = getCurrentInstance();
  const { access_type, access_status, document_type, sys_user_sex } = proxy.useDict('access_type', 'access_status', 'document_type', 'sys_user_sex');</script>
<script>

import { addOutsiders } from "@/api/Outsiders/Transit.js";
import { bg } from "element-plus/es/locales.mjs";

export default {
  data() {
    return {
      form: {
      }
    }
  },
  methods: {
    submitForm() {
      // console.log(this.form.name);
      this.form.permit = 2
      addOutsiders(this.form).then(response => {
        this.$message({
          message: '已提交申请,请等待管理员审核',
          type: 'success'
        });

      })
      let ffomNone = document.querySelector('.fform')
      let tjcgIcon = document.querySelector('.tjcgIcon')
      ffomNone.style.display = 'none'
      tjcgIcon.style.display = 'block'
    }

  },
  mounted() {

    let headerW = document.getElementById('headerW');
    let headerS = document.querySelector('.headerS')
    headerW.addEventListener('mouseover', function () {
      headerW.classList.remove('lucency')
      headerS.style.color = '#444'
    })
    this.$nextTick(function () {
      //调用需要执行的方法
    })
    headerW.addEventListener('mouseout', function () {
      headerW.classList.add('lucency')
      headerS.style.color = '#fff'
    })


    let dls = document.querySelectorAll('.dl')
    let bor = document.querySelector('.navbar .bor')
    dls[0].addEventListener('mouseover', function () {
      bor.style.width = '66px'
      bor.style.left = '0px'

    })
    for (let i = 1; i < dls.length; i++) {
      dls[i].addEventListener('mouseover', function () {
        bor.style.width = '94px'
        bor.style.left = ((i - 1) * 94 + 66) + 'px'
      })
    }
    // 如果别的页面用修改这就好
    dls.forEach(item => {
      item.addEventListener('mouseout', function () {
        bor.style.width = '94px'
        bor.style.left = 348 + 'px'
      })
    })

    // 第二个li滑动
    let innerBor = document.querySelector('.inner_bor')

    let liis = document.querySelectorAll('#subNav .list .nav .li')

    for (let i = 0; i < liis.length; i++) {
      liis[i].addEventListener('mouseover', function () {
        // console.log(liis[i]);
        innerBor.style.left = (i * 91 + 27) + 'px'
      })

      liis[i].addEventListener('mouseout', function () {
        // console.log(liis[i]);
        innerBor.style.left = 118 + 'px'
      })
    }
    // this.$nextTick(function () {
    //   //调用需要执行的方法
    // })


    document.body.style.overflow = "hidden";
    let header = document.getElementById('header')
    console.log(header);
    let dbg = document.querySelector('.dbg')
    let sn = 0
    let footer = document.querySelector('.footer')
    document.onmousewheel = function (e) {



      if (e.wheelDelta > 0) {
        // console.log('向上滑');
        if (sn == 2) {
          document.documentElement.scrollTop = dbg.offsetTop
          setTimeout(function () {
            sn = 1
          }, 500)
        } else if (sn == 1) {
          if (sn == 1) {
            header.classList.remove('headerActive')
            document.documentElement.scrollTop = 0

            setTimeout(function () {
              sn = 0
            }, 500)
          }
        }
      } else {
        // console.log('向下滑');
        if (sn == 0) {
          header.classList.add('headerActive')

          document.documentElement.scrollTop = dbg.offsetTop

          setTimeout(function () {
            sn = 1
            let lis = document.querySelectorAll('.titleLi li')
            // console.log(lis)
            for (let i = 0; i < lis.length; i++) {
              // setTimeout(function () {
              //   // lis[i].classList.add('titleLiA')

              // }, 200 * i)
              setTimeout(function () {
                lis[i].classList.add('titleLiA')
                lis[i].style.top = 0
                lis[i].style.opacity = 0.8

              }, 150 * i)
            }
            let titleNote = document.querySelector('.titleNote')
            setTimeout(function () {
              titleNote.classList.add('titleNoteA')
              titleNote.style.left = '280px'
              titleNote.style.opacity = 0.8
            }, 1250)
            let bg1 = document.querySelector('.bg1')
            let bg2 = document.querySelector('.bg2')
            setTimeout(function () {
              bg1.classList.add('bg1A')
              bg2.classList.add('bg2A')
              bg1.style.opacity = 1
              bg2.style.opacity = 1
              bg1.style.top = '-20px'
              bg2.style.top = '-270px'
            }, 1350)

            let itas = document.querySelectorAll('.ita')
            for (let i = 0; i < itas.length; i++) {
              setTimeout(function () {
                itas[i].classList.add('itaA')
                itas[i].style.top = 0
                itas[i].style.opacity = 1
              }, 450 + i * 150)
            }
          }, 500)

        }
        else if (sn == 1) {
          document.documentElement.scrollTop = footer.offsetTop

          setTimeout(function () {
            sn = 2
          }, 500)
        }

      }
    }


  }
  ,
  // 记得在 beforeDestroy 钩子中移除监听器以避免内存泄漏
  beforeDestroy() {
    document.body.style.overflow = "visible";
  }


}


</script>

<style scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  display: block;
  color: inherit;
  text-decoration: none;
}


#headerW #header,
#headerW #hMenuBtnW {
  transition: all .4s;
  transform: translateY(0);
}

#header {
  z-index: 9999;
  width: 100%;
  min-width: 1280px;
  margin: auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* z-index: 9999; */
  padding: 0 50px;
  background: #fff;
  height: 90px;
  font-family: "Microsoft YaHei", "微软雅黑", \5fae\8f6f\96c5\9ed1, arial, sans-serif, \5b8b\4f53;
}

#headerW .headerActive {
  top: -88px
}

#header .logo {
  top: 25px;
  position: absolute;
  font-size: 28px;
  margin: 0;
  padding: 0;
  line-height: 1;
  /* font-weight: 700; */
  letter-spacing: 1px;
  text-transform: uppercase;
}

#header .logo img {
  width: 36px;
}

@font-face {
  font-family: "字小魂印章体";
  src: url('../../../assets/font/字小魂印章体.ttf');

}

.headerS {
  color: #fff;
  font-family: "字小魂印章体";
  position: relative;
  top: -10px;
  left: 14px;

}

.about_mission.fixScrolScoll_0 #header {
  transform: translateY(0) !important;
}

#headerW.lucency #header {
  background: transparent;
  border-bottom: 2px solid hsla(0, 0%, 100%, .05);
  padding: 0 50px;
}

#header .nav {
  position: relative;
  padding-right: 126px;
  float: right;
}

#header .navbar {
  float: left;
  position: relative;
  height: 90px;
}

#header .navbar .dl {
  float: left;
  height: 100%;
  position: relative;
  transition: all .4s;
}

#header .navbar .dt {
  height: 100%;
  /* 底部线条样式 */
  /* border-bottom: 2px solid hsl(0, 0%, 100%); */

}

#header .navbar .ondt {
  /* 底部线条样式 */
  border-bottom: 3px solid #e40000;
  ;
}

.navbar .bor {
  background-color: #e40000;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  z-index: 10;
  transition: height 0s ease-in-out 0s, width 0s ease-in-out 0s, left 0s ease-in-out 0s;
}

.navbar .bor.anim {
  height: 2px;
  transition: height 0s ease-in-out 0s, width .3s ease-in-out, left .3s ease-in-out;
}

#headerW.lucency #header .navbar .dt a,
#headerW.lucency #header .pox_ri .lang .tips {
  color: hsla(0, 0%, 100%, .9);
}

#header .navbar .dt a {
  padding: 0 19px;
  line-height: 90px;
  color: #444;
  font-size: 14px;
  transition: all .3s;
  font-weight: 700;
}


#header .pox_ri {
  width: 127px;
  position: absolute;
  right: 0;
  top: 0;
  height: 90px;
}

#header .pox_ri .lang {
  float: left;
  height: 100%;
  position: relative;
}

#header .pox_ri .lang .tips {
  position: relative;
  height: 100%;
  padding: 0 6px 0 22px;
  color: #444;
  line-height: 90px;
  font-weight: 700;
  transition: all .3s;
}

i,
cite,
em,
var,
address,
dfn {
  font-style: normal;
}

#header .pox_ri .lang .tips:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -6px;
  width: 3px;
  height: 12px;
  background: #b2b2b2;
}

#header .pox_ri .lang .ul {
  display: none;
  width: 190px;
  height: 70px;
  background-color: #242424;
  position: absolute;
  right: -50px;
  top: 100%;
  text-align: center;
  font-size: 0;
  z-index: 10;
}

#header .pox_ri .lang .ul a {
  display: inline-block;
  font-size: 14px;
  margin: 0 15px;
  line-height: 1.3;
  padding-top: 26px;
  color: #fff;
  opacity: .6;
  transition: all .3s;
}

#header .pox_ri .lang .ul a.on,
#header .pox_ri .lang .ul a:hover {
  opacity: 1;
}

#header .pox_ri .h_menu_btn {
  float: left;
  height: 100%;
  width: 30px;
  display: flex;
  padding-top: 3px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin: 0 -7px 0 8px;
}

#header .pox_ri .h_menu_btn span {
  width: 15px;
  height: 3px;
  margin: 0 0 3px;
  background: #444;
  transition: all .4s;
}

@font-face {
  font-family: "FSSinclair-Bold";
  src: url('../../../assets/font/FSSinclair-Bold.ttf');
}

.auto {
  width: 1280px;
  margin: 0 auto;
  position: relative;
}

#topingBanner {
  /* position: relative; */
  /* overflow: hidden; */
  height: 347px;
  background: url(../../../assets/t/ny_ban.jpg) no-repeat top;
  /* transform: translate3d(0px, 0px, 0px);

  transition-timing-function: cubic-bezier(.4, .16, .29, 1.01); */

}





#topingBanner .bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
}



.noise {
  width: 100%;
  height: 100%;
  opacity: .3;
}

canvas {
  overflow-clip-margin: content-box;
  overflow: clip;
}

.page_ban {
  position: relative;
  height: 114px;
}

#topingBanner .auto {
  height: 347px;
}

.page_ban .slogan .page_ban .slogan_copy {
  position: absolute;


  transition: all .4s;
}

.page_ban .slogan {
  position: absolute;
  top: 248px;
  margin-top: 44px;
  left: 0px;
  float: right;
  opacity: 1;
}

.ht {
  position: relative;
  top: 20px;
  width: 6px;
  height: 15px;
  background-color: #e40000;

}

.page_ban .slogan .en,
.page_ban .slogan_copy .en {
  font-family: FSSinclair-Bold;
  font-size: 24px;
  color: #fff;
  color: #f6eee3;
  line-height: 1;
  text-transform: uppercase;
}

.page_ban .slogan_copy {
  display: none;
  transform: translateX(-120px);
  opacity: 0;
  top: 44px;
}

.page_ban .slogan_copy .en {
  color: #fff;
  color: hsla(0, 0%, 100%, .3);
}

.clearfix:after,
.auto:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
}

#subNav {
  height: 80px;
  border-bottom: 2px solid #f2f2f2;
  background-color: #ffffff00;
  font-family: "Microsoft YaHei", "微软雅黑", \5fae\8f6f\96c5\9ed1, arial, sans-serif, \5b8b\4f53;
  /* z-index: 999; */
}

#subNav .auto {
  height: 80px;
  border-bottom: 2px solid #e4dfda;
  position: relative;
}

#subNav .auto:before {
  content: "";
  position: absolute;
  left: 0;
  top: -10px;
  width: 6px;
  height: 15px;
  background-color: #e40000;
}

#subNav .le {
  float: left;
  height: 100%;
}

#subNav .le a {
  display: inline-block;
  vertical-align: middle;
  color: #7a7a7a;
  font-weight: 700;
  line-height: 80px;
  height: 100%;
}

#subNav .le a:nth-child(2) {
  padding-left: 27px;
  margin-left: 6px;
  background: url(../../../assets/t/icon_nav02.jpg) no-repeat 0;
}

#subNav .list {
  float: right;
  height: 100%;
  position: relative;
}

#subNav .list .nav {
  height: 100%;
}

#subNav .list .nav .li {
  margin-left: 27px;
  float: left;
  height: 100%;
  line-height: 80px;
  margin-left: 27px;
  color: #7a7a7a;
  font-weight: 700;
}

#subNav .list .inner_bor.AnimEnd {
  left: 110px;
  width: 56px;
  transition: width .3s, left .5s ease;
}

#subNav .list .inner_bor.AnimEnd {
  transition: width .3s, left .5s ease;
}

#subNav .list .inner_bor {
  height: 2px;
  background: #e40000;
  position: absolute;
  bottom: -2px;
  left: 0;
  display: block;
  transition: width 0s, left 0s ease;
}

.clearfix:after,
.auto:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
}

#ah3 {
  position: relative;
  margin-top: 53px;
  font-size: 30px;
  color: #4e4e4e;
  line-height: 1;
  font-weight: lighter;
}

#ah5 {
  /* margin-top: -30px; */
  color: #cbc4c0;
  font-size: 24px;
  font-family: "FSSinclair-Bold";
  line-height: 1;
  text-transform: uppercase;
  position: relative;
  letter-spacing: -.5px;
}

.ahah {
  animation-duration: 1s;
  animation-name: ahahah;

}

.ahah5 {
  animation-duration: 1.2s;
  animation-name: ahahah5;

}

@keyframes ahahah {
  from {
    opacity: 0;

    top: 40px;


  }

  to {
    opacity: 1;

    top: 0px;


  }
}

@keyframes ahahah5 {
  0% {
    opacity: 0;

    top: 40px;


  }

  20% {
    opacity: 0;

    top: 40px;


  }

  100% {
    opacity: 1;

    top: 0px;


  }
}


.clearfix:after,
.auto:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
}



.dbg {
  /* display: none; */
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url(../../../assets/t/about-mis-bg2.jpg) no-repeat 50%;
  background-size: cover;
  margin-top: 60px;
  position: relative;


}

.bg1 {
  position: absolute;
  left: -508px;
  top: 80px;
  opacity: 0;
}

.bg2 {
  position: absolute;
  left: -516px;
  top: -170px;
  opacity: 0;



}

.bg1A {
  animation-duration: 1.2s;
  animation-name: bg1A1;
}

.bg2A {
  animation-duration: 1.2s;
  animation-name: bg2A1;
}

@keyframes bg1A1 {
  from {
    opacity: 0;

    top: 80px;


  }

  to {
    opacity: 1;

    top: -20px;

  }
}

@keyframes bg2A1 {
  from {
    opacity: 0;

    top: -170px;


  }

  to {
    opacity: 1;

    top: -270px;


  }
}



.yh {
  z-index: -1;
  position: absolute;
  left: 664px;
  top: 377px;
  transform: rotateX(180deg);
  opacity: 0.1;
}

.yh img {
  width: 560px;
}

.footer {
  opacity: 1;

  background: #090909;
  color: #fff;
  font-size: 14px;
  text-align: center;
  padding: 30px 0;
}

.footercopyright,
.footercopyright span {
  color: #fff;
}

@font-face {
  font-family: "字魂新曲黑";
  src: url('../../../assets/font/字魂夏日诗歌体.ttf');
}

@font-face {
  font-family: "字魂趣圆黑";
  src: url('../../../assets/font/字魂趣圆黑.ttf');
}

.titleNote {
  opacity: 0;
  font-family: "字魂趣圆黑";
  /* font-style: italic; */
  color: #949494;
  font-weight: 600;
  position: absolute;
  top: 360px;
  left: 330px;
  z-index: 9999;
}

.titleNoteA {
  animation-duration: 1.2s;
  animation-name: titleNoteA1;
}

@keyframes titleNoteA1 {
  from {
    opacity: 0;

    left: 330px;


  }

  to {
    opacity: 0.9;

    left: 280px;


  }
}

.titleLi {
  font-family: "字魂新曲黑";
  position: absolute;
  z-index: 99;
  top: 150px;
  left: 170px;
}

.titleLi ul {

  /* font-style: italic; */
  font-size: 80px;

  list-style: none;
  display: flex;
  flex-wrap: wrap;

}

.titleLi ul:nth-child(2) {
  margin-left: 140px;
}

/* 字体渐变 代码量较大 */
.titleLi ul:nth-child(1) li:nth-child(1) {


  background: linear-gradient(to right, #7E7E7E, #828282);

  background-clip: text;

  -webkit-text-fill-color: transparent;


}

.titleLi ul:nth-child(1) li:nth-child(2) {
  background: linear-gradient(to right, #848484, #8B8B8B);
  /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
  background-clip: text;
  /*将设置的背景颜色限制在文字中*/
  -webkit-text-fill-color: transparent;
  /*给文字设置成透明*/

}

.titleLi ul:nth-child(1) li:nth-child(3) {
  background: linear-gradient(to right, #808080, #907474);

  background-clip: text;

  -webkit-text-fill-color: transparent;


}

.titleLi ul:nth-child(1) li:nth-child(4) {
  background: linear-gradient(to right, #917170, #A45B5B);

  background-clip: text;

  -webkit-text-fill-color: transparent;


}




.titleLi ul:nth-child(2) li:nth-child(1) {
  background: linear-gradient(to right, #82807E, #8F6B6B);

  background-clip: text;

  -webkit-text-fill-color: transparent;


}

.titleLi ul:nth-child(2) li:nth-child(2) {
  background: linear-gradient(to right, #966A6A, #A84E4E);

  background-clip: text;

  -webkit-text-fill-color: transparent;


}

.titleLi ul:nth-child(2) li:nth-child(3) {

  background: linear-gradient(to right, #AC4848, #C42C2C);

  background-clip: text;

  -webkit-text-fill-color: transparent;


}

.titleLi ul:nth-child(2) li:nth-child(4) {

  background: linear-gradient(to right, #C52C2C, #D41A1A);

  background-clip: text;

  -webkit-text-fill-color: transparent;


}

.titleLi ul:nth-child(2) li:nth-child(5) {

  background: linear-gradient(to right, #DD0D0D, #E80000);

  background-clip: text;

  -webkit-text-fill-color: transparent;


}

.titleLi ul:nth-child(2) li:nth-child(6) {

  background: linear-gradient(to right, #E81010, #E82222);

  background-clip: text;

  -webkit-text-fill-color: transparent;


}

.fform {
  display: block;
  z-index: 99;
  position: absolute;
  right: 300px;
  top: 70px;

}

.finput {
  width: 300px;

  margin-bottom: 10px;
}

.tjcgIcon {
  display: none;
  position: absolute;
  right: 350px;
  top: 200px;
  opacity: 0.8;
  animation-duration: 1.4s;
  animation-name: tjcgIconA;

}

.tjcgIcon span {
  position: absolute;
  width: 90px;
  left: 78px;
  bottom: -20px;


}

@keyframes tjcgIconA {
  from {
    opacity: 0;




  }

  to {
    opacity: 0.8;




  }
}

.tjcgIcon img {

  width: 200px;
}


.titleLi li {
  position: relative;
  top: 40px;
  opacity: 0;
}

.titleLiA {


  animation-duration: 1.2s;
  animation-name: titleLiA1;

}

@keyframes titleLiA1 {
  from {
    opacity: 0;

    top: 40px;


  }

  to {
    opacity: 0.8;

    top: 0px;


  }
}

.ita {
  position: relative;
  opacity: 0;
  top: 60px;
}

.itaA {


  animation-duration: 2s;
  animation-name: itaA1;

}


@keyframes itaA1 {
  from {
    opacity: 0;

    top: 60px;


  }

  to {
    opacity: 1;

    top: 0px;


  }
}

.bg3 {
  position: absolute;
  right: 300px;
  top: 300px;

  opacity: 0.02;
}

.bg3 img {
  width: 300px;
}
</style>
